<script setup lang="ts">
    import { onBeforeMount, onMounted, ref } from "vue";
    import YunWordleKey from "@/components/YunWordleKey.vue";

    type State = "empty" | "exclude" | "include" | "correct";
    interface Element {
        letter: string;
        state: State;
    }

    const keys = ["qwertyuiop", "asdfghjkl", "zxcvbnm"];
    let wordle_showout_list: Element[][];

    onBeforeMount(() => {
        let list = [];
        const element = { letter: "", state: "empty" as State };
        for (let i = 0; i < keys.length; i++) {
            let list2 = [];
            for (let o = 0; o < keys[i].length; o++) {
                list2.push({ ...element, letter: keys[i][o] });
            }
            list.push(list2);
        }
        wordle_showout_list = list;
    });
</script>

<template>
    <div class="YunKeyboard">
        <h2>Keyboard Showout</h2>
        <div class="inmading">
            <span>This feature is in mading. Sit back and relax.</span>
        </div>
        <div
            class="container"
            v-for="order in wordle_showout_list.length"
            :key="order">
            <div class="row">
                <YunWordleKey
                    v-for="brder in wordle_showout_list[order - 1].length"
                    :letter="((wordle_showout_list[order - 1][brder - 1][`letter`]) as string)"
                    :state=" ((wordle_showout_list[order - 1][brder - 1][`state`]) as State)" />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    div.YunKeyboard {
        position: relative;
        div.inmading {
            position: absolute;
            z-index: 2;
            background-color: #90a0a79d;
            backdrop-filter: blur(4px);
            width: 110%;
            height: 80%;
            left: -5%;
            top: 30%;
            color: #040506;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
        }
        div.container {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            div.row {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                margin-top: 4px;
            }
        }
    }
</style>
